<!DOCTYPE html>
<html lang="ZH-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../CSS/js_demo.css">
    <script type="text/javascript" src="../JS/js_demo.js"></script>
    <title>学生信息管理系统</title>
</head>
<body>
    <div class="container">
        <!-- 1号表单 - 学生信息录入 -->
        <form id="inputForm">
            <h2>学生宿舍管理系统</h2>
            <div>
                <label for="id_student">学号:</label>
                <input type="text" id="id_student" required>
            </div>
            <div>
                <label for="name_student">姓名:</label>
                <input type="text" id="name_student" required>
            </div>
            <div>
                <label for="area_student">地址:</label>
                <input type="text" id="area_student">
            </div>
            <div class="form-actions">
                <button type="submit">提交</button>
                <button type="button" id="modifyBtn">修改学生信息</button>
                <button type="button" id="deleteBtn">删除学生信息</button>
                <button type="button" id="downloadBtn">下载数据</button>
            </div>
        </form>

        <!-- 2号表单 - 学号查询（用于修改/删除） -->
        <form id="queryForm" style="display:none;">
            <h2>请输入学号</h2>
            <div>
                <label for="query_id">学号:</label>
                <input type="text" id="query_id" required>
            </div>
            <div class="form-actions">
                <button type="submit">确认</button>
                <button type="button" id="cancelQuery">取消</button>
            </div>
        </form>

        <!-- 数据展示区域 -->
        <div id="dataDisplay">
            <div class="table-header">
                <h2>学生信息列表</h2>
                <button id="toggleTableBtn">显示</button>
            </div>
            <div id="studentTable"></div>
        </div>
    </div>
</body>
</html>